<template>
	<view class="content">
		<u-navbar 
		  title="会员中心" 
		  :autoBack="true" 
		  :bgColor="bgColor" 
		  :border-bottom='false'
		  :class="{ 'white-navbar': levelIndex === 4 }"
		></u-navbar>
		<view class="userBox">
			<!-- 最顶部的背景图片 -->
			<image :src="baseUrl+levelArr[levelIndex].bg" class="levelBg" />
			</image>
			<view class="userInfoBox">
				<router-link to="/bundle/pages/user_profile/user_profile">
					<image :src="userInfo.avatar" class="avatar" />
				</router-link>
				<text class="name" :class="levelIndex==4?'white':''">{{userInfo.nickname}}</text>
				<text class="mobile" :class="levelIndex==4?'white':''">{{userInfo.mobile}}</text>
				<router-link to="/user/member_rule/member_rule">
				<view class="centerBox" :class="levelIndex==4?'whiteCenterBox':''">
					会员规则
				</view>
				</router-link>
			</view>
			<!-- 等级轮播 -->
			<swiper class="swiperBox" next-margin="10px" @change=changeSwiper :current='levelIndex'>
				<swiper-item class="swiper-item" v-for="(item,index) in levelArr" :key="index">
					<image :src="baseUrl+item.levelbg" class="itemImg" />
					<view class="nowLevelBox" v-if="userInfo.level_rank==index">
						当前等级
					</view>
					<view class="nowLevelBox" v-if="userInfo.level_rank>index">
						已达成
					</view>
					<view class="nowLevelBox" v-if="userInfo.level_rank<index">
						<image :src="baseUrl+'lock.png'" class="lock" />
					</view>
					<view class="progressBarBox" v-if="userInfo.level_rank<index">
						<view class="outBar">
							<view class="innerBar" :style="{ width: innerBarWidth+'%'}">
							</view>
						</view>
						<view class="integralBox1" v-if="index==4">
							<view>距离{{item.name}}会员还需<text
									class="active">{{userInfo.need_arr[index].need_integral}}</text>积分</view>
							<view><text
									class="active">{{userInfo.user_integral}}</text>/{{userInfo.need_arr[index].level_integral}}
							</view>
						</view>
						<view class="integralBox" v-else>
							<view>距离{{item.name}}会员还需<text
									class="active">{{userInfo.need_arr[index].need_integral}}</text>积分</view>
							<view><text
									class="active">{{userInfo.user_integral}}</text>/{{userInfo.need_arr[index].level_integral}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<image :src="baseUrl+equity+'?v=1.1'" class="equity" />
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				bgColor:'transparent',
				baseUrl: `https://cdn.zkjialan.com/img/user/`,
				innerBarWidth: 0,
				levelIndex: 0,
				equity:'equity0.png',
				levelArr: [ //轮播数据
					{
						bg: 'bg1-2.png',
						levelbg: 'bg1-1.png',
						name: '注册会员'
					},
					{
						bg: 'bg2-2.png',
						levelbg: 'bg2-1.png',
						name: '黄金'
					},
					{
						bg: 'bg3-2.png',
						levelbg: 'bg3-1.png',
						name: '铂金'
					},
					{
						bg: 'bg4-2.png',
						levelbg: 'bg4-1.png',
						name: '钻石'
					},
					{
						bg: 'bg5-2.png',
						levelbg: 'bg5-1.png',
						name: '黑钻'
					},
					{
						bg: 'bg6-2.png',
						levelbg: 'bg6-1.png',
						name: 'CHO'
					}
				],
			}
		},
		methods: {
			...mapActions(['getUser']),
			changeSwiper(e) {
				console.log(e);
				this.levelIndex = e.detail.current;
				this.equity=`equity${this.levelIndex}.png`
				//计算进度条
				this.innerBarWidth = this.userInfo.user_integral / (this.userInfo.need_arr[this.levelIndex]
					.need_integral + this.userInfo.user_integral) * 100
			}
		},
		computed: {},
		onLoad() {},
		onShow() {
			this.getUser().then(user => {
				console.log(user);
				this.levelIndex = user.level_rank
			}).catch(error => {
				console.error(error);
			});
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-navbar{
		background-color: transparent !important;
	}
	/deep/.u-title{
		font-size: 33rpx !important;
		font-family: 'am';
		color: #000000 !important;
	}
	/deep/ .u-icon__icon{
		color: #000000 !important;
	}
	.white-navbar {
	  /deep/ .u-title {
	    color: #ffffff !important;
	  }
	  /deep/ .u-icon__icon {
	    color: #ffffff !important;
	  }
	}
	.equity {
		width: 630rpx;
		height: 675rpx;
		margin-top: 654rpx;
		margin-left: 45rpx;
	}
	.userBox {
		position: fixed;
		width: 100%;
		height: 654rpx;
		top: 0;
		.swiperBox {
			position: absolute;
			width: 710rpx;
			height: 603rpx;
			bottom: 0;
			left: 40rpx;

			.integralBox {
				width: 100%;
				font-size: 20rpx;
				font-family: 'ar';
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				letter-spacing: 2rpx;

				.active {
					color: #f08329;
				}
			}

			.integralBox1 {
				width: 100%;
				font-size: 20rpx;
				font-family: 'ar';
				display: flex;
				margin-top: 20rpx;
				justify-content: space-between;
				letter-spacing: 2rpx;
				color: #fff;

				.active {
					color: #f08329;
				}
			}

			.progressBarBox {
				position: absolute;
				width: 600rpx;
				top: 510rpx;
				margin-left: 40rpx;

				.outBar {
					width: 100%;
					height: 10rpx;
					background-color: #f6f6f6;
					border-radius: 10rpx;

					.innerBar {
						width: 0%;
						height: 100%;
						background-color: #f08329;
						border-radius: 10rpx;
					}
				}
			}

			.nowLevelBox {
				position: absolute;
				width: 100rpx;
				height: 38rpx;
				left: 0;
				top: 335rpx;
				// background-color: red;
				font-size: 18rpx;
				font-family: 'ar';
				text-align: center;
				line-height: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.lock {
					width: 75rpx;
					height: 20rpx;
				}
			}

			.swiper-item,
			.itemImg {
				position: relative;
				width: 674rpx;
				height: 100%;
			}
		}

		.levelBg {
			position: absolute;
			width: 100%;
			height: 520rpx;
			top: 0;
		}

		.userInfoBox {
			position: absolute;
			width: 712rpx;
			height: 126rpx;
			left: 38rpx;
			top: 210rpx;

			.avatar {
				position: absolute;
				width: 126rpx;
				height: 126rpx;
				top: 0;
				left: 0;
				z-index: 9999;
				border-radius: 50%;
				border: 1rpx solid #f08329;
			}

			.name {
				position: absolute;
				font-size: 36rpx;
				left: 162rpx;
				top: 20rpx;
				font-family: 'ab';
			}

			.mobile {
				position: absolute;
				font-size: 22rpx;
				font-family: 'ar';
				left: 162rpx;
				top: 80rpx;
			}

			.centerBox {
				position: absolute;
				right: 40rpx;
				top: 26rpx;
				width: 122rpx;
				height: 50rpx;
				border-radius: 25rpx;
				font-size: 20rpx;
				font-family: 'ar';
				color: #fff;
				text-align: center;
				line-height: 50rpx;
				border: 1rpx solid #000000;
				color: #000000;
				z-index: 999999;
			}
			.whiteCenterBox{
				border: 1rpx solid #ffffff;
				color: #fff;
			}
		}
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}

	page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}
</style>